<template>
    <div id="app">
        <div style="margin:0 auto;width:0px;height:0px;overflow:hidden;" id="qqh5shareimg">
            <img src="//yztv-vod.homecdn.com/2562aac2bebd4e75a0dadb7c60e1e8dc.png"/>
        </div>
        <router-view/>
        <div id="root_bg" v-if="needupdate"></div>
        <div id="root_info" v-if="needupdate">
            <div class="root_info_close_icon" @click="colseupinfo()"></div>
            <div class="root_info_content">
                当前版本无法正确跳转到app内对应内容，为提升使用体验，请升级到最新版本~
            </div>
            <div class="root_info_close_button" @click="colseupinfo()">我知道了</div>
        </div>
    </div>
</template>

<script>
    import behaviours from "../src/assets/libs/func/behaviours.js"  //用户行为

    /* 引入非页面组件 */
    //import Author1 from "./components/author1.vue";
    import Shareconf from "./assets/libs/func/share.js"
    // console.log(process.env)
    window.interbaseUrl = location.protocol + process.env.VUE_APP_SERVER_URL;
    window.liveinterUrl = location.protocol + process.env.VUE_APP_LIVE_URL;
    window.countinterUrl = location.protocol + process.env.VUE_APP_COUNT_URL;
    window.sharebaseUrl=location.protocol + process.env.VUE_APP_SHARE_URL;
    window.yaobaseUrl=location.protocol + process.env.VUE_APP_HUDONG_URL;
    export default {
        name: 'app',
        components: {
            // Author1,
            Shareconf,
            behaviours,
        },
        data: function () {
            return {
                needupdate: false
            }
        },
        beforeCreate: function () {
            if (navigator.userAgent.indexOf("YangFan/") != -1) {
                this.needupdate = true;
            }
        },
        methods: {
            colseupinfo: function () {
                this.needupdate = false;
            }
        }
    }
</script>

<style>
    #app {
        font-family: "droid sans fallback","pingfang","SimHei";
    }

    body, html {
        margin: 0;
        padding: 0;
    }

    .floatL {
        float: left;
    }

    .floatR {
        float: right;
    }

    .clearBoth {
        clear: both;
    }

    ul {
        list-style: none;
    }

    .fixedTop, .fixedBottom {
        width: 100%;
        z-index: 1000;
        position: fixed;
        left: 0;
    }

    .fixedTop {
        top: 0;
    }

    .fixedBottom {
        bottom: 0;
    }

    .takeup {
        width: 100%;
        height: 3.3rem;
    }

    .greyChannel {
        /*width: 100%;*/
        height: 0.5rem;
        background-color: #e5e5e5;
        margin: 0.3rem -0.8rem;
    }

    #wrapper {
        padding: 0.8rem;
        box-sizing: border-box;
    }

    /* 外部容器：自留页边距 */

    /* 直播节目的标签 */


    /* 分页 */
    .page-container {
        font-size: 0.85rem;
        color: #999999;
        line-height: 1.6rem;
        width: 100%;
        text-align: center;
    }

    #root_bg {
        position: fixed;
        z-index: 900;
        background: rgba(0, 0, 0, 0.475);
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

    #root_info {
        position: fixed;
        z-index: 901;
        background: #fff;
        height: 173px;
        width: 275px;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        right: 0;
        border-radius: 5px;
    }

    .root_info_content {
        width: 238px;
        margin: 0 auto;
        margin-top: 27px;
        font-size: 16px;
        color: #666;
        text-align: center;
        word-break: break-all;
        line-height: 23px;
    }

    .root_info_close_icon {
        width: 24px;
        height: 24px;
        background-image: url("../src/assets/images/close-icon.png");
        background-size: 100% 100%;
        position: absolute;
        right: -12px;
        top: -12px;
    }

    .root_info_close_button {
        width: 238px;
        height: 36px;
        margin: 24px auto 0 auto;
        background: #9852FF;
        border-radius: 500px;
        font-size: 14px;
        line-height: 36px;
        color: #fff;
        text-align: center;

    }

    /* 单图模式下，用来弥补标题和信息栏之间的空隙的 */
    .single-component-takeup {
        display: block;
        height: 0.9rem;
    }

    .dplayer-full-in-icon {
        display: none !important;
    }

    .dplayer-playing video, .dplayer-paused video {
        object-fit: contain !important;
    }

    .dplayer video {
        object-fit: cover;
        position: absolute !important;
    }

    .edit-takeup {
        height: 3.8rem;
    }
    .dplayer-setting{
        display: none !important;
    }
    .video-js{
        width: 100%;
        height:100%;
        position: absolute;
        top:0;
        left:0;
    }
    .video-js .vjs-time-control{display:block;}
    .video-js .vjs-remaining-time{display: none;}
    .video-js .vjs-time-control{
        min-width: 0;
        padding-left: 0;
        padding-right:0;}
    .video-js .vjs-big-play-button{
        /*
         播放按钮换成圆形
        */
        height: 2em;
        width: 2em;
        line-height: 1.9em;
        border-radius: 1em;
    }
    .vjs-big-play-centered .vjs-big-play-button{
        margin-top: -1em;
        margin-left: -1em;
    }
</style>
